<template>
	<!-- 封装的按钮 -->
	<div class="fbutton flexcent" :class="{'btndisab':disabled,'btnborder':border,'info':type==='info'}" :style="{'borderColor':btncolor,
		backgroundColor:ghost?'transparent':btncolor,
		color:ghost?btncolor:'#ffffff'}" @click.stop.prevent="change">
		<div class="iconfont" :class="icon"></div>
		<!-- 内容插槽 -->
		<slot />
	</div>
</template>

<script>
	export default {
		name: 'fbutton', //封装的按钮
		props: {
			// 是否禁用
			disabled: {
				type: [Boolean],
				default: false
			},
			// button 的类型,默认primary
			type: {
				type: [String],
				default: 'primary'
			},
			// 幽灵属性，使按钮背景透明	
			ghost: {
				type: [Boolean],
				default: false
			},
			// 设置按钮的图标类型	
			icon: {
				type: [String],
			},
			// 是否是圆角按钮,//默认不是
			border: {
				type: [Boolean],
				default: false
			}
		},
		data() {
			return {
				typelist: [{
						type: "primary",
						color: "#4068F7"
					},
					{
						type: "error",
						color: "#FA4141"
					},
					{
						type: "info",
						color: "#EBEBEB"
					},
				],
				btncolor: "", //默认颜色
			}
		},
		watch: {
			// 初始化同步数据 
			type: {
				handler(newtype) {
					var obj = this.typelist.find(item => item.type === newtype)
					if (obj) {
						this.btncolor = obj.color;
					} else {
						this.btncolor = "4068F7";
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 按钮事件触发
			change() {
				if (!this.disabled) {
					// 先执行用一次，之后隔多久执行一次
					this.way.throttle(500).then(() => {
						this.$emit('change')
					});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	// 封装的按钮
	.fbutton {
		border: 1rpx solid transparent;
		height: 50rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		border-radius: 10rpx;
	}

	.fbutton:active {
		opacity: .7;
	}

	// 是否是圆角按钮
	.btnborder {
		border-radius: 25rpx;
	}

	//
	.info {
		color: #999999 !important;
	}

	// 是否禁用
	.btndisab {
		color: #00000040 !important;
		background: #f5f5f5 !important;
		border-color: #d9d9d9 !important;
	}

	.btndisab:active {
		opacity: 1;
	}
</style>